{% extends "djangollery/root.html" %}
{% load i18n %}

{% block title %}{{ object.title }}{% endblock %}

{% block dochead %}
<link rel="stylesheet" href="/static/djangollery/css/basic.css" type="text/css" />
<link rel="stylesheet" href="/static/djangollery/css/djangollery.css" type="text/css" />
<script type="text/javascript" src="/static/djangollery/js/jquery-1.3.js"></script>
<script type="text/javascript" src="/static/djangollery/js/jquery.galleriffic.js"></script>

<style type="text/css">
	.noscript{display:none}
</style>
{% endblock %}

{% block content %}

<h1>{{ object.title }}</h1>

<h2>
	{% blocktrans with object.date_added|date:"d/m/Y" as date_added %}  
	Published  {{ date_added  }}
	{% endblocktrans %}
</h2>
{% if object.description %}
	<p>{{ object.description }}</p>
{% endif %}
<div id="container">
	<div id="gallery-adv" class="content">
		<div id="controls-adv" class="controls"></div>
		<div id="loading-adv" class="loader"></div>
		<div id="slideshow-adv" class="slideshow"></div>
		<div id="caption-adv" class="embox"></div>
	</div>

	<div id="thumbs-adv" class="navigation">
		<ul class="thumbs noscript">
			{% for photo in object.public %}
			<li>
				<a class="thumb" href="{{ photo.get_display_url }}" title="{{ photo.title}}">
					<img src="{{ photo.get_thumbnail_url }}" alt="{{ photo.title}}" />
				</a>
				<div class="caption">
					<div class="download">
						<a href="{{ photo.get_original_url }}">{% trans "Download Original" %}</a>
					</div>
					<div class="image-title">{{ photo.title}}</div>
					<div class="image-desc">{{ photo.caption }}</div>
				</div>
			</li>
			{% endfor %}
		</ul>
	</div>
	
</div>
<p><a href="{% url pl-gallery-list 1 %}">{% trans "View all galleries" %}</a></p>
	<script type="text/javascript">
		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs


		$(document).ready(function() {
			var onMouseOutOpacity = 0.67;
						$('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity)
							.hover(
								function () {
									$(this).not('.selected').fadeTo('fast', 1.0);
								}, 
								function () {
									$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
								}
							);
		
		
			// Initialize Advanced Galleriffic Gallery
			var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', {
				delay:                  2000,
				numThumbs:              12,
				preloadAhead:           10,
				enableTopPager:         true,
				enableBottomPager:      true,
				imageContainerSel:      '#slideshow-adv',
				controlsContainerSel:   '#controls-adv',
				captionContainerSel:    '#caption-adv',
				loadingContainerSel:    '#loading-adv',
				renderSSControls:       true,
				renderNavControls:      true,
				playLinkText:           '{% trans "Play Slideshow" %}',
				pauseLinkText:          '{% trans "Stop Slideshow" %}',
				prevLinkText:           '{% trans "&lsaquo; Previous Photo" %}',
				nextLinkText:           '{% trans "Next Photo &rsaquo;" %}',
				nextPageLinkText:       '{% trans "Next &rsaquo;" %}',
				prevPageLinkText:       '{% trans "&lsaquo; Previous" %}',
				enableHistory:          true,
				autoStart:              false,
				onChange:               function(prevIndex, nextIndex) {
					$('#thumbs-adv ul.thumbs').children()
						.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
						.eq(nextIndex).fadeTo('fast', 1.0);
				},
				onTransitionOut:        function(callback) {
					$('#slideshow-adv, #caption-adv').fadeOut('fast', callback);
				},
				onTransitionIn:         function() {
					$('#slideshow-adv, #caption-adv').fadeIn('fast');
				},
				onPageTransitionOut:    function(callback) {
					$('#thumbs-adv ul.thumbs').fadeOut('fast', callback);
				},
				onPageTransitionIn:     function() {
					$('#thumbs-adv ul.thumbs').fadeIn('fast');
				}
				
			});

		});
	</script>





{% endblock %}
